<template>
  <div class="left-chart-3">
    <div class="lc3-header">行使时长</div>
    <div class="histogram_box">
      <ve-histogram
        style="width:100%;height:100%;"
        :data="chartData"
        :extend="chartExtend"
        :settings="chartSettings"
      ></ve-histogram>
    </div>

  </div>
</template>

<script>
export default {
  name: 'LeftChart3',
  data () {
    this.chartSettings = {
      yAxis: {
        type: 'value'
      },

      itemStyle: {
        normal: {
          // barBorderRadius: [10] // 柱形图圆角，初始化效果
        }
      }
    }
    this.chartExtend = {
      xAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#07536a'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07536a'
          }
        }
      },
      legend: {
        textStyle: {
          color: '#fff'
        },
        itemStyle: {
          barBorderRadius: [0]
        }
      },
      yAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#07536a'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07536a'
          }
        }
      },
      series: {
        barWidth: 10
      },
      tooltip: {
        trigger: 'none'
      }
    }
    return {
      chartData: {
        columns: ['日期', '成本'],
        rows: [
          { 日期: '1月1日', 成本: 15, 利润: 12 },
          { 日期: '1月2日', 成本: 12, 利润: 25 },
          { 日期: '1月3日', 成本: 21, 利润: 10 },
          { 日期: '1月4日', 成本: 41, 利润: 32 },
          { 日期: '1月5日', 成本: 31, 利润: 30 },
          { 日期: '1月6日', 成本: 71, 利润: 55 }
        ]
      }
    }
  }
}
</script>

<style lang="less">
.left-chart-3 {
  background: url(./img/panel.png) center no-repeat;
  background-size: 100% 100%;
  .histogram_box {
    width: 100%;
    height: calc(100% - 20px);
    overflow: hidden;
  }
  .lc3-header {
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    text-indent: 20px;
    margin-top: 10px;
  }

  .lc3-details {
    height: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #096dd9;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc3-chart {
    flex: 1;
  }
}
</style>
